<template>
    <div :class="isChange?'active page':'page'" >
        <!-- 标题 -->
        <div class="title">
            <div class="top">
                <h1>农业数据实时监控系统</h1>
                <div class="change" @click="change">主题切换</div>
            </div>

            <img src="../../public/image/top02.png" alt="">
        </div>
        <!-- 主体内容 -->
        <div class="continue">
            <!-- 左侧盒子 -->
            <div class="left">
                <!-- 左侧上盒子 -->
                <div class="leftTop">
                    <AreaTopPage></AreaTopPage>
                </div>
                <!-- 左侧下盒子 -->
                <div class="leftBottom">
                    <Harvest></Harvest>
                </div>
            </div>
            <div class="center">
                <!-- 中间上盒子 -->
                <div class="centerTop">
                    <Proportion></Proportion>
                </div>
                <!-- 中间下盒子 -->
                <div class="centerBottom">
                    <CropCoveragePage></CropCoveragePage>
                </div>

            </div>
            <div class="right">
                <!-- 右侧上盒子 -->
                <div class="rightTop">
                    <CropGrowthTrend></CropGrowthTrend>
                </div>
                <!-- 右侧下盒子 -->
                <div class="rightBottom">
                    <TotalArea></TotalArea>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AreaTopPage from './AreaTopPage.vue';
import Harvest from './Harvest.vue';
import Proportion from './Proportion.vue';
import CropCoveragePage from './CropCoveragePage.vue';
import CropGrowthTrend from './CropGrowthTrend.vue';
import TotalArea from './TotalArea.vue';

export default {
    data() {
        return {
            isChange:true,
            wqe:'#fff',
            
        }
    },
    methods: {
        change(){
            console.log(123,this.isChange);
            this.isChange = !this.isChange;
            this.$store.commit('changeTheme',this.isChange)
        }
    },
    mounted() { },
    
    filters: {},
    components: {
        AreaTopPage, Harvest, Proportion, CropCoveragePage, CropGrowthTrend, TotalArea
    },
}
</script>
<style scoped>
.active {
    /* height: 80%; */
    background-color: #100C2A;
    color: #fff;
}

.title {
    text-align: center;
    font-size: 14px;
}
/* .top{
    display: flex;
} */
.change {
    position: absolute;
    right: 20px;
    top: 20px;
    color: aqua;
    z-index: 10;
}
h1 {
    line-height: 60px;
}

img {
    width: 100%;
    margin-top: -30px;
}

.continue {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 22%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}

.center {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}

.right {
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.leftTop {
    width: 100%;
    height: 55%;
    border: 1px solid #38C5EC;
}

.leftBottom {
    width: 100%;
    height: 40%;
    border: 1px solid #38C5EC;
}

.centerTop {
    width: 100%;
    height: 30%;
    border: 1px solid #38C5EC;

}

.centerBottom {
    width: 100%;
    height: 65%;
    border: 1px solid #38C5EC;

}

.rightTop,
.rightBottom {
    width: 100%;
    height: 47%;
    border: 1px solid #38C5EC;
}


</style>